<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const posts = ref([])

onMounted(() => {
  // 模拟API调用
  posts.value = [
    { id: 1, title: '第一篇文章', content: '内容...' },
    { id: 2, title: '第二篇文章', content: '内容...' },
    { id: 3, title: '第三篇文章', content: '内容...' }
  ]
})
</script>

<template>
  <div class="posts">
    <h3>用户文章</h3>
    <div v-for="post in posts" :key="post.id" class="post">
      <h4>{{ post.title }}</h4>
      <p>{{ post.content }}</p>
    </div>
  </div>
</template>

<style scoped>
.posts {
  margin: 15px 0;
}

.post {
  margin: 10px 0;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 8px;
}

h4 {
  margin: 0 0 10px 0;
}
</style> 